<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">
        <div class="loginform">
          <ul class="tab clearFix">
            <li>
              <a style="border-right: 0">扫描登录</a>
            </li>
            <li>
              <a class="current">账户登录</a>
            </li>
          </ul>

          <div class="content">
            <!-- <form action="##"> 
              账号地方
              <div class="input-text clearFix">
                <span class="user"></span>
                <input type="text" placeholder="邮箱/用户名/手机号" v-model="phone" />
              </div>
              密码地方
              <div class="input-text clearFix">
                <span class="pwd"></span>
                <input type="password" placeholder="请输入密码" v-model="password" />
              </div>
              <div class="setting clearFix">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" value="2" checked="" />
                  自动登录
                </label>
                <span class="forget">忘记密码？</span>
              </div>
              阻止默认事件
              <button class="btn" @click.prevent="login">
                登&nbsp;&nbsp;录
              </button>
            </form>-->
            <el-form :model="dataObj" ref="ruleFormRef" :rules="rules" label-width="80px" :inline="false" size="normal">
              <el-form-item label="手机号 :" prop="phone">
                <el-input v-model="dataObj.phone" placeholder="请输入你的手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码 :" prop="password">
                <el-input v-model="dataObj.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
            </el-form>
            <div class="setting clearFix">
              <label class="checkbox inline">
                <input name="m1" type="checkbox" value="2" checked="" />
                自动登录
              </label>
              <span class="forget">忘记密码？</span>
            </div>
            <!-- 阻止默认事件 -->
            <button class="btn" @click.prevent="login">
              登&nbsp;&nbsp;录
            </button>
            <div class="call clearFix">
              <ul>
                <li><img src="./images/qq.png" alt="" /></li>
                <li><img src="./images/sina.png" alt="" /></li>
                <li><img src="./images/ali.png" alt="" /></li>
                <li><img src="./images/weixin.png" alt="" /></li>
              </ul>
              <router-link class="register" to="/register">立即注册</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router'
import useLoginStore from '../../stores/login'
import useCenterStore from '../../stores/center'
let centerStore = useCenterStore()
let loginStore = useLoginStore()
let router = useRouter()
const ruleFormRef = ref()
const dataObj = reactive({
  //手机号码
  phone: "13000000000",
  //密码
  password: "z123456",
})
// // 存储手机号
// let phone = ref('13900100000')
// // 存储密码 
// let password = ref('123')
// 表单验证
// 手机号
const validatePass = (rule: any, value: any, callback: any) => {
  if (/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
    callback()
  } else {
    callback(new Error('请按照正确格式输入手机号'))
  }
}
// 密码
const password = (rule: any, value: any, callback: any) => {
  if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
    callback()
  } else {
    callback(new Error('密码中只能包含字母和数字'))
  }
}
// 表单验证
const rules = reactive<FormRules>({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    { validator: password, trigger: 'blur' }
  ],
})
// 点击登录按钮
const login = async () => {

  // await loginStore.userLogin(phone.value, password.value)
  const loginInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (loginInfo.phone != dataObj.phone || loginInfo.password != dataObj.password) {
    ElMessage({
      type: 'error',
      message: '账号或密码错误'
    })
    return
  }
 await centerStore.getUserInfo()
  router.push({ path: '/index/recommend' })
    ElMessage({
      type: 'success',
      message: '用户登录成功'
    })

}

</script>

<style  scoped>
/* 外面大容器 */
.login-container {}

.login-wrap {
  height: 487px;
  background-color: #f5f7f9;
  background: url(./images/loginbg.jpg) no-repeat;
  background-size: 100% 487px;
}

.login {
  width: 1200px;
  height: 487px;
  margin: 0 auto;

}

/* 登录的表单 */
.loginform {
  width: 420px;
  height: 406px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .6);
  float: left;
  padding: 20px;
  margin-top: 30px;
}

/* 扫描登录和账号登录 */
.tab li {
  width: 50%;
  float: left;
  text-align: center;
}

.tab li a {
  width: 100%;
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  border: 1px solid #ddd;
  box-sizing: border-box;
  text-decoration: none;
}

/* 账户登录 */
.current {
  border-bottom: none;
  border-top-color: #28a3ef;
  color: #e1251b;
}

/* 账户和密码的样式 */
.content {
  width: 380px;
  height: 316px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: none;
  margin: 20px 0 10px 0;
  padding: 18px;
}

.content form {
  margin: 40px 0 15px 0;
  font-size: 12px;
  line-height: 18px;
}

/* 登录注册输入框外部盒子的样式 */
.input-text {
  margin-bottom: 16px;
  margin-top: 16px;
}

/* 登录注册左侧的空格样式 */
.input-text span {
  float: left;
  width: 37px;
  height: 32px;
  border: 1px solid #ccc;
  background: url(./images/icons.png) no-repeat -10px -201px;
  box-sizing: border-box;
  border-radius: 2px 0 0 2px;
  margin: 10px 0;
}

.input-text .pwd {
  background-position: -72px -201px;
  /* background: url(./images/icons.png) no-repeat -72px -201px; */
}

/* 登录注册输入框的样式 */
.input-text input {
  width: 302px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-left: none;
  float: left;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 22px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 0 2px 2px 0;
  outline: none;
  margin: 10px 0;
}

.setting label {
  float: left;
}

.setting .forget {
  float: right;
}

.btn {
  background-color: #e1251b;
  padding: 6px;
  border-radius: 0;
  font-size: 16px;
  font-family: 微软雅黑;
  word-spacing: 4px;
  border: 1px solid #e1251b;
  color: #fff;
  width: 100%;
  height: 36px;
  margin-top: 25px;
  outline: none;
}

.call {
  margin-top: 30px;
}

.call ul {
  float: left;
}

.call ul li {
  float: left;
  margin-right: 5px;
}

.register {
  float: right;
  font-size: 15px;
  line-height: 38px;
}

.register:hover {
  color: #4cb9fc;
  text-decoration: underline;
}
</style>